<template>
    <view :data-theme="globPrimary">
        <u-navbar title="修改密码"></u-navbar>
        <view class="password-view">
            <u-form :model="form" ref="uForm" label-width="152">
                <u-form-item label="原密码" prop="password1"
                    ><u-input
                        v-model="form.password1"
                        placeholder="请输入原密码"
                        type="password"
                        :password-icon="false"
                /></u-form-item>
                <u-form-item label="新密码" prop="password2"
                    ><u-input
                        v-model="form.password2"
                        placeholder="请输入新密码"
                        type="password"
                        :password-icon="false"
                /></u-form-item>
                <u-form-item label="确认密码" prop="password3"
                    ><u-input
                        v-model="form.password3"
                        placeholder="请确认新密码"
                        type="password"
                        :password-icon="false"
                /></u-form-item>
            </u-form>
            <view class="text">
                <u-icon
                    name="error-circle-fill"
                    color="#B7BAC1"
                    size="32"
                ></u-icon>
                <text>密码长度为6~20个字符，区分大小写</text>
            </view>
            <edu-button type="primary" @click="submit">确认修改</edu-button>
        </view>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
import md5Libs from "@/uview-ui/libs/function/md5";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            form: {
                password1: "",
                password2: "",
                password3: "",
            },
            rules: {
                password1: [
                    {
                        required: true,
                        message: "请输入原密码",
                        trigger: ["change", "blur"],
                    },
                ],
                password2: [
                    {
                        required: true,
                        message: "请输入新密码",
                        trigger: ["change", "blur"],
                    },
                    {
                        validator: (rule, value, callback) => {
                            return this.$edu.test.password(value);
                        },
                        message: "长度在6-20之间",
                        trigger: ["change", "blur"],
                    },
                ],
                password3: [
                    {
                        required: true,
                        message: "请重新输入密码",
                        trigger: ["change", "blur"],
                    },
                    {
                        validator: (rule, value, callback) => {
                            return value === this.form.password2;
                        },
                        message: "两次输入的密码不相等",
                        trigger: ["change", "blur"],
                    },
                ],
            },
        };
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",
        }),
    },
    methods: {
        submit() {
            this.$refs.uForm.validate((valid) => {
                if (valid) {
                    this.$edu.api
                        .updateAccountPwdEdit({
                            ex_password: md5Libs.md5(this.form.password1),
                            new_password: md5Libs.md5(this.form.password2),
                        })
                        .then((res) => {
                            this.$refs.uToast.show({
                                title: res.msg,
                                duration: 1500,
                                back: true,
                            });
                        })
                        .catch((res) => {
                            this.$u.toast(res.msg);
                        });
                }
            });
        },
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
};
</script>

<style lang="scss" scoped>
.password-view {
    min-height: calc(100vh - 44px);
    background-color: #fff;
    padding: 0 30rpx;
    .text {
        display: flex;
        align-items: flex-start;
        margin-top: 16rpx;
        margin-bottom: 80rpx;
        .u-icon {
            margin-top: 2rpx;
            margin-right: 5rpx;
        }
        text {
            font-size: 26rpx;
            font-weight: 400;
            color: $edu-tips-color;
            line-height: 37rpx;
        }
    }
}
</style>
